

// 我的名片列表 
//表格头部模版 https://www.cnblogs.com/zh718594493/p/14622644.html

//加载模块  
layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
    //得到各种内置组件
    var layer = layui.layer //弹层
        , laypage = layui.laypage //分页
        , util = layui.util
        , form = layui.form

        // , laydate = layui.laydate //日期
        , table = layui.table //表格
    // , carousel = layui.carousel //轮播
    // , upload = layui.upload //上传
    // , element = layui.element //元素操作
    // , slider = layui.slider //滑块
    // , dropdown = layui.dropdown //下拉菜单

    //向世界问个好
    // layer.msg('Hello World');

    //监听Tab切换
    // element.on('tab(demo)', function (data) {
    //     layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
    //         tips: 1
    //     });
    // });
    function getcalling_card_message(page) {
        var datas = {
            url: '/api/user.calling_card_message/list',
            http_type: 'POST',
            datas: {
                "page": page,
                "page_size": 10
            }
        }
        wxx.HttpReqeust(datas, function (res) {
            console.log('res.data.data', res)
            if (res.data.data.length == 0) {
                $(".layui-table-main").html("暂无数据");
                return;
            }
            viewMinPianList(res);
            init_table(res) //渲染表格
        });
    }

    getcalling_card_message(1);

    function init_table(res) {
        //执行一个 table 实例
        table.render({
            elem: '#mingpianId'
            , minHeight: 50
            , title: '用户表'
            , page: true //开启分页
            // , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: false //开启合计行
            , cols: [[
                { field: '', title: '姓名', align: 'center', templet: function (d) { return '<span>' + d.card.name + '</span>' } },
                { field: 'position', title: '职位', align: 'center', templet: function (d) { return '<span>' + d.card.position + '</span>' } }
                , { field: 'card.updatetime', title: '收到时间', align: 'center', templet: function (d) { return '<span>' + layui.util.toDateString(d.card.updatetime * 1000, 'yyyy-MM-dd') + '</span>' } }
                , { fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo' }
            ]],
            data: res.data.data || [],
            limits: ["10"],
            done: function (res, curr, count) {
                console.log(res, curr, count)
                $(".layui-table-page").css({ "text-align": "center" });
                //找到lay-id为tableId的表格设置当前表格下的分页样式，不影响页面其他layui表格
            }
        });

        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: res.data.total //数据总数
            , limit: 10 //每页显示的数据条数
            , skin: '#C10D26' //自定义选中色值
            // ,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
            , jump: function (obj, first) {
                if (!first) {
                    getcalling_card_message(obj.curr)
                    layer.msg('第' + obj.curr + '页', { offset: 'b' });
                }
            }
        });
    }
    //监听头工具栏事件
    // table.on('toolbar(test)', function (obj) {
    //     var checkStatus = table.checkStatus(obj.config.id)
    //         , data = checkStatus.data; //获取选中的数据
    //     switch (obj.event) {
    //         case 'add':
    //             layer.msg('添加');
    //             break;
    //         case 'update':
    //             if (data.length === 0) {
    //                 layer.msg('请选择一行');
    //             } else if (data.length > 1) {
    //                 layer.msg('只能同时编辑一个');
    //             } else {
    //                 layer.alert('编辑 [id]：' + checkStatus.data[0].id);
    //             }
    //             break;
    //         case 'delete':
    //             if (data.length === 0) {
    //                 layer.msg('请选择一行');
    //             } else {
    //                 layer.msg('删除');
    //             }
    //             break;
    //     };
    // });

    //监听行工具事件
    table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'js200') {
            // layer.msg('查看操作js200');
            handleQSJS(obj)

        } else if (layEvent === 'js300') {
            handleQSJS(obj)
            // layer.msg('查看操作js200');
        }
        // else if (layEvent === 'more') {
        //     //下拉菜单
        //     dropdown.render({
        //         elem: this //触发事件的 DOM 对象
        //         , show: true //外部事件触发即显示
        //         , data: [{
        //             title: '编辑'
        //             , id: 'edit'
        //         }, {
        //             title: '删除'
        //             , id: 'del'
        //         }]
        //         , click: function (menudata) {
        //             if (menudata.id === 'del') {
        //                 layer.confirm('真的删除行么', function (index) {
        //                     obj.del(); //删除对应行（tr）的DOM结构
        //                     layer.close(index);
        //                     //向服务端发送删除指令
        //                 });
        //             } else if (menudata.id === 'edit') {
        //                 layer.msg('编辑操作，当前行 ID:' + data.id);
        //             }
        //         }
        //         , align: 'right' //右对齐弹出（v2.6.8 新增）
        //         , style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
        //     })
        // },


    });
    util.on('lay-on', {
        'test-page-custom': function (e) {
            // var this_id = e.attr('data-id');
            // var this_type = e.attr('data-type');

            layer.open({
                type: 1,
                scrollbar: false,
                area: '600px',
                resize: false,
                shadeClose: true,
                title: ["编辑名片", 'font-size:16px;font-weight: 600'],
                content: `
                <div class="layui-form" lay-filter="filter-test-layer" style="margin: 20px 16px 16px 16px;">
                  <div class="demo-login-container">
                  
                    <div class="layui-form-item">
                      <div class="layui-input-wrap">
                        <input name="name" value="" style="min-height: 35px;" lay-verify="required" placeholder="请填写姓名" lay-reqtext="请填写姓名" autocomplete="off" class="layui-input" lay-affix="clear"></input>
                      </div>
                    </div>
                    <div class="layui-form-item">
                    <div class="layui-input-wrap">
                      <input name="phone" value="" style="min-height: 35px;" lay-verify="required" placeholder="请填写手机号" lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" lay-affix="clear"></input>
                    </div>
                  </div>
                    <div class="layui-form-item">
                      <div class="layui-input-wrap">
                        <input name="position" value="" style="min-height: 35px;" lay-verify="required" placeholder="请填写职位" lay-reqtext="请填写职位" autocomplete="off" class="layui-input" lay-affix="clear"></input>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-input-wrap">
                        <input name="educational" value="" style="min-height: 35px;" lay-verify="required" placeholder="请填写学历" lay-reqtext="请填写学历" autocomplete="off" class="layui-input" lay-affix="clear"></input>
                      </div>
                    </div>
                    <div class="layui-form-item">
                     <div class="layui-input-wrap">
                      <input name="email" value="" style="min-height: 35px;" lay-verify="required" placeholder="请填写邮箱" lay-reqtext="请填写邮箱" autocomplete="off" class="layui-input" lay-affix="clear"></input>
                     </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <input name="wc_code" value="" style="min-height: 35px;" lay-verify="required" placeholder="请填写个人二维码" lay-reqtext="请填写个人二维码" autocomplete="off" class="layui-input" lay-affix="clear"></input>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <input name="school" value="" style="min-height: 35px;" lay-verify="required" placeholder="请填写毕业学校" lay-reqtext="请填写毕业学校" autocomplete="off" class="layui-input" lay-affix="clear"></input>
                        </div>
                    </div>
                     
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <input name="company_name" value="" style="min-height: 35px;" lay-verify="required" placeholder="请填写公司名称" lay-reqtext="请填写公司名称" autocomplete="off" class="layui-input" lay-affix="clear"></input>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <input name="company_address" value="" style="min-height: 35px;" lay-verify="required" placeholder="请填写公司地址" lay-reqtext="请填写公司地址" autocomplete="off" class="layui-input" lay-affix="clear"></input>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <input name="company_url" value="" style="min-height: 35px;" lay-verify="required" placeholder="请填写公司网址" lay-reqtext="请填写公司网址" autocomplete="off" class="layui-input" lay-affix="clear"></input>
                        </div>
                    </div>
                     
                    <div class="layui-form-item" style="margin-top:20px;display: flex;align-items: center;justify-content: flex-end;">
                        <button style="width:100px" class="layui-btn" lay-submit lay-filter="demo-login">提交</button>
                    </div>
                   
                  </div>
                </div>
              `,
                success: function () {
                    // 对弹层中的表单进行初始化渲染
                    form.render();

                    // 表单提交事件
                    form.on('submit(demo-login)', function (data) {
                        console.log("获取表单字段值", data.field);
                        // var field = data.field; // 获取表单字段值
                        // field.content_id = this_id;
                        // field.type = this_type;
                        // field.url = window.location.href;
                        // PAGES.setPageCorrect(field)
                        handleEditMingPian();
                        layer.closeAll();
                        return false; // 阻止默认 form 跳转
                    });
                }
            });
        }
    });
    //  编辑我的名片
    function handleEditMingPian(obj) {
        console.log('名片内容------>>>.', obj)
        let datas = {
            url: '/api/user.calling_card/create',
            http_type: 'POST',
            datas: {
                ...obj
                // "avatar": "头像地址111", //头像
                // "name": "姓名", //用户名
                // "phone": "电话号码", //电话号码
                // "position": "职位", //职位
                // "email": "电子邮箱", //电子邮箱，比如 example@qq.com
                // "wc_code": "个人微信二维码", //个人微信二维码
                // "company_logo": "公司logo", //公司logo
                // "company_address": "公司地址", //公司地址
                // "company_name": "公司名称", //公司信息  专家会员必填
                // "company_code": "公司公众号二维码", //公司公众号二维码
                // "educational": "本科", //学历(枚举)(专科，本科，研究生，硕士，博士)
                // "school": "", //毕业学校
                // "company_url": "" //公司官网地址
            }
        }
        wxx.HttpReqeust(datas, function (response) {
            if (response.code == 1) {
                layer.msg('编辑成功')
            } else {
                layer.msg('系统错误');
            }
        });
    }

    //  签收  拒收
    function handleQSJS(obj) {
        console.log(obj)
        let datas = {
            url: '/api/user.calling_card_message/receive',
            http_type: 'POST',
            datas: {
                "id": obj.data.card.id, //名片id
                "status": obj.data.status == 200 ? 300 : 200 //200 接收 300 拒收
            }
        }
        wxx.HttpReqeust(datas, function (response) {
            if (response.code == 1) {
                layer.msg(obj.data.status == 200 ? '接收成功' : '拒收成功')
            } else {
                layer.msg('系统错误');
            }
        });
    }
    function viewMinPianList(res) {
        let data = res.data.data;
        let strList = ""; //名片列表

        $.each(data, function (index, value) {
            strList += `<div style="margin-bottom: 30px" class="card_education">
        <img class="headImage" src="${value.card.avatar}" alt="">
        <div class="education">
            <span id="name">${value.card.name}</span>
            <span>学历：${value.card.educational}</span>
            <span id="phone">手机号：${value.card.phone}</span>
        </div>
        <div class="post">
            <span id="position_name">职位：${value.card.position}</span>
            <span>学校：${value.card.school || "--"}</span>
            <span id="email">邮箱：${value.card.email}</span>
        </div>
        <div class="wx_code">
            <img id="wc_code" src="../images/content/wx_code.png" alt="">
            <span>${value.card.wc_code}</span>
        </div>
        </div>`
            // alert(index + ': ' + value);
        });
        $(".mp_id").append(strList);
    }

});

